<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>情绪检测中心</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        .detect-container {
            max-width: 1200px;  /* 增加容器宽度以适应三个选项 */
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
            align-items: center;
            min-height: 60vh;
        }
        .detect-option {
            flex: 1 1 300px;  /* 调整每个卡片的基础宽度 */
            background: rgba(255,255,255,0.45);  /* 降低透明度 */
            backdrop-filter: blur(10px);  /* 添加毛玻璃效果 */
            -webkit-backdrop-filter: blur(10px);  /* Safari 支持 */
            border-radius: 12px;
            padding: 36px 24px 28px 24px;
            text-align: center;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        .detect-option:hover {
            background: rgba(255,255,255,0.55);  /* 悬停时略微提高透明度 */
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }
        .detect-option img {
            width: 90px;
            margin-bottom: 20px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        .detect-option h3 {
            color: #2d3a4b;
            margin-bottom: 20px;
            font-size: 1.4rem;
            text-shadow: 0 1px 2px rgba(255,255,255,0.8);
        }
        .profile-link {
            position: absolute;
            top: 40px;
            right: 80px;
            font-size: 20px;
            color: #fff;
            background: rgba(0,117,66,0.85);
            padding: 10px 28px;
            border-radius: 24px;
            text-decoration: none;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
            transition: background 0.2s;
        }
        .profile-link:hover {
            background: #00d679;
            color: #fff;
        }
        .main-title {
            color: #fff;
            text-align: center;
            margin-top: 60px;
            margin-bottom: 30px;
            font-size: 2.4rem;
            letter-spacing: 2px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.18);
        }
        .overlay {
            background: linear-gradient(to right, rgba(29, 75, 174, 0.38), rgba(79, 219, 146, 0.44)), url('/static/images/camera.jpg') no-repeat center center fixed;
            background-size: cover;
            min-height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0; left: 0;
            z-index: -1;
        }
        .btn.theme-button {
            background: linear-gradient(90deg, rgba(67,233,123,0.85), rgba(56,249,215,0.85));
            border: none;
            padding: 12px 32px;
            border-radius: 24px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(67,233,123,0.2);
        }
        .btn.theme-button:hover {
            background: linear-gradient(90deg, rgba(56,249,215,0.9), rgba(67,233,123,0.9));
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67,233,123,0.25);
        }
        .mt-3 {
            margin-top: 1rem;
        }

        /* 聊天功能样式 */
        #chat-popup {
            position: fixed;
            right: 32px;
            bottom: 100px;
            width: 630px;
            max-width: 98vw;
            height: 480px;
            max-height: 90vh;
            background: #fff;
            border-radius: 16px;
            display: none;
            flex-direction: column;
            z-index: 10000;
            overflow: hidden;
            animation: popupIn 0.18s;
        }

        @keyframes popupIn {
            from { transform: translateY(40px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .container { 
            max-width: 600px; 
            margin: 0; 
            background: #fff;
            border-radius: 12px;
            padding: 0; 
            position: relative; 
        }

        #chat-box {
            width: 100%;
            height: 400px;
            border: none;
            background: #fff;
            overflow-y: auto;
            padding: 16px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .message-row {
            display: flex;
            align-items: flex-end;
        }

        .message-row.user {
            justify-content: flex-end;
        }

        .message-row.assistant {
            justify-content: flex-start;
        }

        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 12px;
            background: #fff;
        }

        .message-row.user .avatar {
            order: 2;
            margin-left: 12px;
            margin-right: 0;
        }

        .message-row.assistant .avatar {
            order: 0;
            margin-right: 12px;
            margin-left: 0;
        }

        .bubble {
            max-width: calc(65% - 50px);
            padding: 12px 18px;
            border-radius: 18px;
            font-size: 16px;
            line-height: 1.6;
            word-break: break-word;
        }

        .bubble.user {
            background: #e6f0ff;
            color: #222;
            border-bottom-right-radius: 6px;
        }

        .bubble.assistant {
            background: #fff;
            color: #222;
            border-bottom-left-radius: 6px;
        }

        #input-area {
            display: flex;
            gap: 8px;
            padding: 0 16px 16px 16px;
            background: #fff;
        }

        #user-input {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #ccc;
            font-size: 16px;
            background: #fff;
        }

        #send-btn {
            padding: 10px 22px;
            border-radius: 8px;
            border: none;
            background: #4e8cff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }

        #send-btn:hover {
            background: #2563d8;
        }

        #chat-float-btn {
            position: fixed;
            right: 32px;
            bottom: 32px;
            width: 220px;
            height: 320px;
            background: transparent;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 9999;
            padding: 0;
            border: none;
        }

        #three-avatar {
            width: 220px;
            height: 320px;
        }

        #three-avatar canvas {
            width: 100% !important;
            height: 100% !important;
            border-radius: 0;
            display: block;
            background: transparent;
        }

        .bubble-text {
            position: absolute;
            left: 50%;
            top: 80px;
            transform: translateX(-50%);
            background: #fff;
            color: #7a5fa1;
            border-radius: 22px;
            padding: 14px 26px;
            font-size: 17px;
            font-family: 'Segoe UI Rounded', 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.7;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
            border: 1.5px solid #b3d8ff;
            opacity: 0.98;
            transition: opacity 0.3s;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <h1 class="main-title">情绪检测中心</h1>
    <div class="detect-container">
        <div class="detect-option">
            <img src="/static/images/upload.png" alt="上传图片">
            <h3>上传图片检测</h3>
            <a href="/detect/upload" class="btn theme-button mt-3">上传图片检测</a>
        </div>
        <div class="detect-option">
            <img src="/static/images/camera.png" alt="摄像头检测">
            <h3>实时摄像头检测</h3>
            <a href="/detect/camera" class="btn theme-button mt-3">打开摄像头检测</a>
        </div>
    </div>

    <!-- 聊天功能 -->
    {% if session.get('user_id') %}
    <div id="chat-float-btn" title="AI 聊天">
        <div id="three-avatar" style="width:220px;height:320px; position:relative;">
            <div id="bubble-text" class="bubble-text"></div>
        </div>
    </div>

    <div id="chat-popup">
        <div class="container">
            <div id="chat-box"></div>
            <div id="input-area">
                <input type="text" id="user-input" placeholder="请输入..." autofocus>
                <button id="send-btn">发送</button>
            </div>
        </div>
    </div>

    <script src="/static/js/three.min.js"></script>
    <script src="/static/js/GLTFLoader.js"></script>
    <script src="/static/js/OrbitControls.js"></script>
    <script>
        const chatBox = document.getElementById('chat-box');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const chatFloatBtn = document.getElementById('chat-float-btn');
        const chatPopup = document.getElementById('chat-popup');
        const avatarContainer = document.getElementById('three-avatar');

        chatFloatBtn.onclick = function(e) {
            e.stopPropagation();
            chatPopup.style.display = chatPopup.style.display === 'flex' ? 'none' : 'flex';
            chatPopup.style.flexDirection = 'column';
            if (chatPopup.style.display === 'flex') {
                setTimeout(() => { userInput.focus(); }, 200);
            }
        };

        chatPopup.onclick = function(e) {
            e.stopPropagation();
        };

        document.addEventListener('click', function() {
            if (chatPopup.style.display === 'flex') {
                chatPopup.style.display = 'none';
            }
        });

        function appendMessage(role, text) {
            const row = document.createElement('div');
            row.className = 'message-row ' + role;
            const avatar = document.createElement('img');
            avatar.className = 'avatar';
            avatar.src = role === 'user'
                ? '/static/images/people_img.jpg'
                : '/static/images/chat_img.png';
            avatar.alt = role === 'user' ? '用户头像' : 'AI头像';
            const bubble = document.createElement('div');
            bubble.className = 'bubble ' + role;
            bubble.textContent = text;
            if (role === 'user') {
                row.appendChild(bubble);
                row.appendChild(avatar);
            } else {
                row.appendChild(avatar);
                row.appendChild(bubble);
            }
            chatBox.appendChild(row);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        sendBtn.onclick = async function() {
            const text = userInput.value.trim();
            if (!text) return;
            appendMessage('user', text);
            userInput.value = '';
            appendMessage('assistant', '思考中...');

            const res = await fetch('/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message: text })
            });
            const data = await res.json();
            chatBox.lastChild.querySelector('.bubble').textContent = data.reply;
        };

        userInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') sendBtn.click();
        });

        // Three.js 3D数字人
        let renderer, scene, camera, mixer, clock, model, controls;

        function init3DAvatar() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, 220/320, 0.1, 100);
            camera.position.set(0, 1.2, 4.5);

            renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
            renderer.setSize(220, 320);
            renderer.setClearColor(0x000000, 0);
            avatarContainer.appendChild(renderer.domElement);

            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(0, 2, 2);
            scene.add(light);
            scene.add(new THREE.AmbientLight(0xffffff, 0.7));

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableZoom = false;
            controls.enablePan = false;
            controls.autoRotate = true;
            controls.autoRotateSpeed = 1.0;

            const loader = new THREE.GLTFLoader();
            loader.load('/static/images/digital_human.glb', function(gltf) {
                model = gltf.scene;
                model.scale.set(0.3, 0.3, 0.3);
                model.position.set(0.5, -1.5, 0);
                scene.add(model);

                if (gltf.animations && gltf.animations.length > 0) {
                    mixer = new THREE.AnimationMixer(model);
                    gltf.animations.forEach((clip) => {
                        mixer.clipAction(clip).play();
                    });
                }
            });

            clock = new THREE.Clock();
            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            if (mixer) mixer.update(clock.getDelta());
            if (controls) controls.update();
            if (model) {
                model.rotation.y += 0.02;
            }
            renderer.render(scene, camera);
        }

        init3DAvatar();

        const bubbleTexts = [
            "你好呀",
            "有什么情绪方面的问题想和我聊聊吗？",
            "我可以陪你谈心哦~"
        ];
        let bubbleIndex = 0;
        const bubbleDiv = document.getElementById('bubble-text');

        function showNextBubble() {
            bubbleDiv.textContent = bubbleTexts[bubbleIndex];
            bubbleIndex = (bubbleIndex + 1) % bubbleTexts.length;
        }
        showNextBubble();
        setInterval(showNextBubble, 2500);
    </script>
    {% endif %}
</body>
</html>